<template>
    <div class="phoneKey">
        <!-- 顶部状态栏 -->
        <div class="top">
            <van-icon name="arrow-left" size="20px" @click="goback()" class="icon" />
            <p>详情</p>
        </div>
        <!-- 审核详情 -->
        <div class="body">
            <!-- sign为1时 为小区防火 -->
            <div v-if="sign==2">
                <div class="bigtitle">
                    {{text1.bigtitle}}
                </div>
                <div class="smalltitle" style="font-size: 16px;padding-bottom: 20px;">
                    {{text1.small.smalltitle1}}
                </div>
                <div v-html='text1.small.smalltext1' class="text"
                    style="font-size: 14px;text-indent:2em;padding-bottom: 20px;">
                    <!-- {{text1.small.smalltext}} -->
                </div>
                <div class="smalltitle" style="font-size: 16px;padding-bottom: 20px;">
                    {{text1.small.smalltitle2}}
                </div>
                <div v-html='text1.small.smalltext2' class="text"
                    style="font-size: 14px;text-indent:2em;padding-bottom: 20px;">
                    <!-- {{text1.small.smalltext}} -->
                </div>
            </div>
            <!-- sign为2时 为小区防盗 -->
            <div v-if="sign==1">
                <div class="bigtitle">
                    {{text2.bigtitle}}
                </div>

                <div v-html='text2.small.smalltext1' class="text" style="font-size: 14px;padding-bottom: 20px;">
                    <!-- {{text1.small.smalltext}} -->
                </div>

            </div>
            <!-- 物业小知识 -->
            <div v-if="sign==3">
                <div class="bigtitle">
                    {{text3.bigtitle}}
                </div>

                <div v-html='text3.small.smalltext1' class="text" style="font-size: 14px;padding-bottom: 20px;">
                    <!-- {{text1.small.smalltext}} -->
                </div>

            </div>
            <!-- 生活小常识 -->
            <div v-if="sign==4">
                <div class="bigtitle">
                    {{text4.bigtitle}}
                </div>

                <div v-html='text4.small.smalltitle' class="text"
                    style="font-size: 14px;padding-bottom: 20px;text-indent: 2em">
                    <!-- {{text1.small.smalltext}} -->
                </div>
                <div v-html='text4.small.smalltext1.text' class="text"
                    style="font-size: 14px;padding-bottom: 20px;text-indent: 2em">
                    <!-- {{text1.small.smalltext}} -->
                </div>
                <div style="text-align: center">
                    <img :src="text4.small.smalltext1.imgurl" alt="" style="width: 80%;">
                </div>
                <div v-html='text4.small.smalltext2.text' class="text"
                    style="font-size: 14px;padding-bottom: 20px;text-indent: 2em">
                    <!-- {{text1.small.smalltext}} -->
                </div>
                <div style="text-align: center">
                    <img :src="text4.small.smalltext2.imgurl" alt="" style="width: 80%;">
                </div>

                <div v-html='text4.small.smalltext3.text' class="text"
                    style="font-size: 14px;padding-bottom: 20px;text-indent: 2em">
                    <!-- {{text1.small.smalltext}} -->
                </div>
                <div style="text-align: center">
                    <img :src="text4.small.smalltext3.imgurl" alt="" style="width: 80%;">
                </div>

                <div v-html='text4.small.smalltext4.text' class="text"
                    style="font-size: 14px;padding-bottom: 20px;text-indent: 2em">
                    <!-- {{text1.small.smalltext}} -->
                </div>
                <div style="text-align: center">
                    <img :src="text4.small.smalltext4.imgurl" alt="" style="width: 80%;">
                </div>


            </div>
        </div>

    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex'
    import { Step, Steps } from 'vant'
    import { Icon } from 'vant'

    export default {
        // 当前组件的名称

        data() {
            return {
                sign: 4,
                text1: {
                    bigtitle: "小区防火安全知识",
                    small: {
                        smalltitle1: "自防自救",
                        smalltext1: `发现起火立即报警，这是每一个公民应尽的义务和应有的消防意识。首先，是向消防队报警：<br>
                                    （1）要记牢火警电话是 “119” ；现在三台合一，拨打 110也可以报火警。<br>
                                    （2）报警时要沉着冷静，正确简洁，说清着火单位所在地区及门牌号码；<br>
                                    （3）说清是什么东西着火？火势大小？<br>
                                    （4）要说清报警人员的姓名和使用的电话；<br>
                                    （5）报警后迅速到路口等候消防车去火场的道路。<br>
                                    如果身上着火怎么办？千万不要乱跑，因为奔跑会形成风而加大火势。可以采用一下方法：<br>
                                    （1）迅速将着火衣服脱掉；<br>
                                    （2）就地打滚，将火压灭；<br>
                                    （3）跳入附近的水池火浅水塘内；<br>
                                    （4）用湿棉被、湿毯子、湿麻袋将身体盖起来，使火熄灭。<br>
                                    如果你周围火势很大，你所在的房间被大火封闭，你可以采取以下措施：<br>
                                    （1）关闭通向火区的所有门窗；<br>
                                    （2）用湿布塞住门窗缝隙，防止烟火进入室内；<br>
                                    （3）可向门窗浇水，延缓火势蔓延。<br>
                                    在火场上，如果你被烧伤，应该怎么办？简单的处置办法是：<br>
                                    （1）要立即使受伤的部位离开灼热的物质；<br>
                                    （2）用无菌纱布包扎；<br>
                                    （3）不要把水泡弄破；<br>
                                    （4）可以口服淡盐水。`,
                        smalltitle2: "正确使用灭火器",
                        smalltext2: `干粉灭火器的使用方法:<br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 干粉灭火器主要用于扑救固体类物质的初起火灾；也可以扑救可燃液体、气体或带电设备的初起火灾；还可以扑救可染固体、液体、气体及带电设备的混合火灾。<br>
                                        灭火时，应手提灭火器快速奔赴起火点。使用前，先将灭火器上下颠倒几次，使干粉预先松动。喷射时，要将喷嘴对准火焰根部左右摆动，由近及远，快速推进，不
                                        留余火，以防复燃。在扑灭油类液体火灾时，不要直接冲击液面，防止液体溅出。<br>
                                        另外，要特别注意站在上风处向下风处喷射。 4公斤干粉灭火器的有效射程为 3-5米，2公斤干粉灭火器的有效射程为 2-3米。<br>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;泡沫灭火器使用方法<br>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;泡沫灭火器是通过筒体内酸性溶液与碱性溶液混合后发生化学反应。将生成的泡沫压出喷嘴，进行灭火。泡沫灭火器主要用于扑灭油类火灾，也可以用于扑灭一般固
                                        体物质，如木、棉、麻、竹等火灾。使用时应注意：器盖和筒底不能对着人，防止万一筒体爆破伤人。当扑灭容器内易燃液体的火焰时， 应将泡沫喷射到容器内壁上，使泡沫覆盖在油面上，不要直接冲击油面。<br>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二氧化碳灭火器使用方法<br>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二氧化碳灭火器是利用液化的二氧化碳气体进行灭火的，喷射出的二氧化碳能立即笼罩已燃物品，使其得不到足够的空气而熄灭。适用于扑灭图书、档案、资料、高档电器等火灾。使用压嘴式二氧化碳灭火器时，用右手拔出压嘴式开关的保险销，握住喷筒根部的手柄，左手按下压嘴压把，二氧化碳即可喷出。使用时，最好戴上防护手套，以免被二氧化碳冻伤。
                                        消防栓使用方法
                                        通常两个人操作。<br>
                                        1、打开消防栓箱 <br>
                                        2、取出枪头、水带进行连接<br>
                                        3、转开止水阀 <br>
                                        4、握住枪头向火焰喷射。`
                    },


                },
                text2: {
                    bigtitle: "居民防盗小知识",
                    small: {
                        smalltext1: `
                            <div>（1）门窗加固对预防盗窃很重要。要选择质量好、安全系数高的防盗门窗，避免“防盗门窗不防盗”的现象发生。</div> <br style="padding-bottom:10px">
                            <div>（2）在家中尽量不要存放大量的现金，对一些贵重物品要妥善存放，存折也要设置密码，不要和身份证等证件放在一起。最好在一些较贵重的物品上刻上记号，为犯罪分子销赃制造障碍、为公安机关破案、追赃创造条件。</div> <br>
                            <div>（3）搞好邻里关系，彼此之间互相照应。</div> <br>
                            <div>（4）发现陌生人在住所附近徘徊时，一定要多加小心，必要时报警。</div> <br>
                            <div>（5）对上门维修、送货、粘贴宣传品的人，要查明其确切身份。</div> <br>
                            <div>（6）正好撞上犯罪分子在家中行窃时，应保持头脑冷静，在不被发现的情况下应马上报警，若来不及可就近求助邻居将其抓获。如被其发现，则要正确衡量双方的力量，在力量相差较悬殊的情况下，为防止犯罪分子狗急跳墙，可答应放行将其麻痹，然后伺机报警或求助。</div> <br>
                            <div>（7）夜间要关好门窗， 特别是容易被忽视的客厅、 阳台及厨房的门窗，严防犯罪分子爬窗入室盗窃。</div> <br>
                            <div>（8）对于落水管外露的公房，可在落水管上安装防攀爬的网罩，铁剌、甚至黄油。</div> <br>
                            `
                    },
                },
                text3: {
                    bigtitle: "物业小知识",
                    small: {
                        smalltext1: `

<div class="text">一、物业公司何时开始收取物业管理费？</div><br>
答：一般可以分成两种情况和方式，一是，从购房人收房签字后，开始收取物业管理费；二是，物业管理公司以住户登记入住手续时开始收取管理费。<br>
<br>
<div class="text">二、开发商的空置房要缴纳物业管理费？</div><br>

答：目前，没有明文规定。但按照目前的行业惯例来看，开发商的空置房都交纳物业管理费。至于交纳多少的管理费，可以按照《房屋使用、管理、维修公约》中规定的相应标准执行。<br>
<br>
<div class="text">三、在收取物业的管理费时，计费面积以什么为准？</div><br>
答：计费面积以房产证上标明的建筑面积为准，这个建筑面积包括两个部分：一部分是套内建筑面积，另一部分是公用分摊面积。对于还没有取得房产证的房屋，以开发商与购房人签订的购房合同上的销售面积为准。<br>
<div class="text">四、公共区域的照明费用，谁来负担？</div><br>
<br>
答：公共区域的照明一般指楼房的楼梯、门厅、走廊等地方的照明，这部分能源费用应由受益人承担，一般惯例是，按单元门进行分摊费用。因此，住户除了缴纳本户所用能源费用外，还应缴纳分摊的能源费用。<br>
<br>
<div class="text">五、住户装修时，是否应向物业公司交纳装修押金？</div><br>
答：住户对房屋进行装修已是普通现象，为了保证住户装修不破坏房屋主体结构，保证房屋的安全使用，住户在装修时，必须向物业公司提出申请，经物业公司批准后方可施工，而且还必须与物业公司签订装修协议，明确装修的内容、装修时间、垃圾处理方式以及违约责任的处理等内容。对于物业公司是否应收取装修押金，应按照购房人在办理入住手续时与物业公司双方约定为准，即按《房屋使用、管理、维修公约》中的规定执行。<br>
<br>
<div class="text">六、如何划分物业管理公司和业主的维修范围？</div><br>
 答：物业管理公司对业主房屋的维修分为两种情况。
  一种情况是：开发商自己对购房人承担的房屋保修义务委托给了物业管理公司，物业管理公司对业主的房屋进行维修不收取任何费用，这种情况是物业管理公司代开发商履行房屋保修义务；
  另一种情况是：物业管理公司对业主房屋的维修不属于开发商对购房人承担的房屋保修范围，物业管理公司收取工时费，这种情况属于物业管理公司受业主的委托提供的一次独立的有偿服务。
  物业管理公司与业主的维修范围与维修责任一般在双方签订的物业管理合同中约定。
  一般而言，物业管理公司对共用部位和共用设备、公共建筑和共用设施，包括房屋的外墙面、楼梯间、通道、屋面、电梯、机电设备、共用天线、消防设施、绿地等承担维养护责任。
  一般情况下，业主应对其所有的物业承担维修养护责。室内的部位和设备，包括水、电、气等户内管线，设施和自用阳台，由业主负责维修。业主可以自行维护其自用部分和自用设备，也可以委托物业管理公司或其他专业维修人员进行维修，但委托他人维修需支付相应费用。<br>
`
                    }
                },
                text4: {
                    bigtitle: "生活小常识",
                    small: {
                        smalltitle: "在我们的生活当中，也是利用很多的小妙招来做得更完美，看看你知道哪些。你知道怎样减缓有幸皮肤吗？你知道土豆还有很多的作用吗？没关系，我们一起来看一下这些小妙招，让我们的生活更加的丰富多彩。",
                        smalltext1: {
                            text: "1、硫磺皂，相信很多人都用过，它最大的用处就是可以去除身上或脸上的痘痘。但是它还有一个小妙招就是可以很干净的去除姨妈血，而且价格也很便宜，所以，女孩可以准备一两块放在家里。",
                            imgurl: require("../assets/img/img2/v2_pz8mk9.jpg")
                        },
                        smalltext2: {
                            text: "2、第二个就是我们刚才说的，早起之后脸上太油腻怎么办，尤其是在夏天，天气炎热的时候，皮肤更容易出油。所以，觉得皮肤太油的话就可以在洗过脸之后，用热毛巾热敷几分钟，之后再用护肤品，这样可以促进皮肤更好地吸收，还能调节水油平衡。",
                            imgurl: require("../assets/img/img2/v2_pz8mm4.jpg")
                        },
                        smalltext3: {
                            text: "3、在我们厨房的水龙头上面，总是有很多的油渍，怎么擦都擦不干净，洗洁精，钢丝球都没有用。这个时候我们就可以切一片土豆片在水龙头油渍的地方摩擦，就能很有效的去除上面的油渍和锈斑。这是因为土豆里面含有很丰富的淀粉，可以很好的增大摩擦力，去除油渍。",
                            imgurl: require("../assets/img/img2/v2_pz8moo.jpg")
                        },
                        smalltext4: {
                            text: "4、早起的时候，经常会出现眼睛肿胀，尤其是熬夜的朋友，就可以用热毛巾和冷毛巾来回交替循环的敷在眼睛上面，可以很快的缓解眼睛疲劳的问题。",
                            imgurl: require("../assets/img/img2/v2_pz8mrn.jpg")
                        },
                        smalltext5: {
                            text: "5、有很多的车友都会遇到打雷下雨的天气，遇到这种天气不要随便的走动。首先要做的就是关闭收音机，收起天线，然后再关闭所有的窗户，也可以选择继续行驶，因为车子本身是有避雷的效果的。",
                            imgurl: require("../assets/img/img2/v2_pz8msi.jpg")
                        },
                    }
                }

            }
        },

        // 在当前组件中添加其他的自定义组件
        comdivonents: {

        },

        /*
            在computed中添加mapState
            如果computed中只有一个辅助函数，后面可以直接写成函数名
        */
        computed: mapState(['token', 'userInfo']), // this.token相当于this.$store.state.token

        methods: {

            goback() {
                this.$router.back()
            },
            goExamine() {
                this.$router.push({
                    name: "examine"
                })
            },
            gohome() {
                this.$router.push({
                    name: "home"
                })
            }
        },
        mounted() {
            console.log("sign",this.$route.params.sign)
           this.sign=this.$route.params.sign
        },
        activated() {
            console.log("activated",this.$route.params.sign)
           this.sign=this.$route.params.sign
         }, //如果页面有keep-alive缓存功能，这个函数会触发
        // 生命周期函数,创建实例,可以获取this,但DOM节点还没有创建出来

    }
</script>

<!-- 添加scoped属性,将样式的作用域限制在当前组件内,不会影响子组件 -->
<style lang="scss" scoped>
    .body {
        padding: 10px 15px 0 15px
    }

    .bigtitle {
        font-size: 20px;
        font-weight: 700
    }

    .phoneKey {
        padding-top: 40px;
       
    }

    .text {
        margin-top: 5px;
    }

    .top {
        background-color:white;
        height: 40px;
        line-height: 40px;
        position: relative;
        font-size: 16px;
        margin-bottom: .3rem;
        text-align: center;
        border-bottom: 1px solid #999;
        /* padding-bottom: 10px; */
        position: fixed;
        top:0;
        left: 0;
        width: 100%;
    }

    .icon {
        position: absolute;
        left: .2rem;
        top: 10px;
        font-size: 20px;
    }

    .top p {
        font-size: 18px;
        line-height: 40px;
    }
</style>